<!-- 最左边的选择框 -->
<template>
  <div>
    <div class="mycard">
      <header>
        <img @mouseenter="enter()" @mouseleave="leave()" :src="userInfo.portrait ? userInfo.portrait : img" class="avatar"/>
        <span class="user-name">{{userInfo.displayName}}</span>
        <div class="header_inif" v-show="info">
          <div class="header_top">
            <img :src="userInfo.portrait ? userInfo.portrait : img" alt="" width="100%">
          </div>
          <div class="header_text">
            <h5>{{userInfo.displayName}}</h5>
            <!-- <p>备注：悬崖上的</p> -->
            <p>地区：{{userInfo.address}}</p>
          </div>
        </div>
      </header>
      <footer>
        <i class="icon iconfont icon-more" @click="drop_down = !drop_down"></i>
        <div class="drop_down" id="drop_down" v-show="drop_down">
          <ul>
            <li class="drop_down_li"  @click="initiateChat">
              <img src="../../../static/img/Icon-xiaoxi.png" alt="">发起聊天
            </li>
            <li class="drop_down_li" @click="close">
              <img src="../../../static/img/icon-tuichu.png" alt="">退出
            </li>
          </ul>
        </div>
      </footer>
    </div>

    <search></search>

    <div class="navbar" @click="clearSearch">
      <router-link to="/chat" class="icon iconfont icon-msg"></router-link>
      <router-link to="/friend" class="icon iconfont icon-friend"></router-link>
      <!-- <router-link to="/my" class="icon iconfont icon-collection"></router-link> -->
    </div>

    <!-- 弹窗 -->
    <el-dialog
      title="请勾选添加联系人"
      :visible.sync="dialogVisible"
      width="500px">
      <div class='check-box' ref="check">
        <el-row>
          <el-col :span="24">
            <el-checkbox-group v-model="checkList">
              <div class="checkbox-item" v-for="(item,index) in friendlist" :key="index">
                <el-checkbox :label="item">
                  <div>
                    <span class="c-item"
                    :style="{ 'background': 'url(' + (item.portrait ? item.portrait : img) + ') no-repeat center left', 'background-size': '40px'}">
                    {{item.alias == '' ? item.displayName : item.alias}}
                    </span>
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-col>
          <!-- <el-col :span="12">暂未开发</el-col> -->
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="launchChat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import search from "../../components/search/search";
  import imgIcon from '../../assets/img/Icon1@2x.png'
  import { _createGroupRequest } from '../../pbApi/pb_WFCMessage'
  import {mapState} from "vuex";
  import { log } from 'util';
  import store from '../../store';
  import $ from 'jquery'

  import html2canvas from 'html2canvas';

  const clickoutside = {
      // 初始化指令
      bind(el, binding, vnode) {
          function documentHandler(e) {
              // 这里判断点击的元素是否是本身，是本身，则返回
              if (el.contains(e.target)) {
                  return false;
              }
              // 判断指令中是否绑定了函数
              if (binding.expression) {
                  // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                  binding.value(e);
              }
          }
          // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
          el.__vueClickOutside__ = documentHandler;
          document.addEventListener('click', documentHandler);
      },
      update() {},
      unbind(el, binding) {
          // 解除事件监听
          document.removeEventListener('click', el.__vueClickOutside__);
          delete el.__vueClickOutside__;
      }
  }

  export default {
    components: {
      search
    },
    props:{
          messages:Number  //接收父组件传过来的值，这是稍微高级一点的写法，也可以props:[' message']
      },
    data() {
      return {
        drop_down: false,
        dialogVisible: false,
        info:false,//显示头像
        img: imgIcon,
        checkList: [],
        imgUrl: '',
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        friendlist: state => state.chat.friendlist
      })
    },
    mounted(){

    },
    directives: {
        // 点击其他地方隐藏
        // clickoutside
    },
    methods: {
      clearSearch() {
        this.$store.dispatch("search", "");
      },
      // 发起聊天
      initiateChat(){
        this.checkList = []
        this.dialogVisible = true
         setTimeout(() => this.$refs.check.scrollTop = 0, 0)
      },
      launchChat(){
        this.dialogVisible = false
        var obj = {
          list: this.checkList
        }
        this.$store.dispatch('CREATING_GROUP',obj)
        this.checkList = []
      },
      //移入移出显示信息
      enter(){
        this.info = true;
      },
      leave(){
        this.info = false;
      },
      close(){
        this.$store.dispatch('CLOSE')
      }
      // hanldClose(e){
      //   if(this.drop_down){
      //     this.drop_down = false
      //   }
      // }
    },
     watch:{
        messages(val){    //message即为父组件的值，val参数为值
          if(val){
            this.drop_down = false
          }
        }
      },
    mounted(){
      var This = this;
      $(document).on('click',function(e){
        var className =$(e.target).attr("class");
          if(className !='icon iconfont icon-more' || className == ''){
            This.drop_down = false
          }else{
            This.drop_down = true
          }
      });

      let H = $(window).height()-$('.mycard').height()-$('.wrapper').outerHeight(true)-$('.navbar').outerHeight(true);
      $('.msglist,.friendlist').height(H);

      $(window).resize(function() {
        let H = $(window).height()-$('.mycard').height()-$('.wrapper').outerHeight(true)-$('.navbar').outerHeight(true);
        $('.msglist,.friendlist').height(H);
        if($(window).height()>860){
          $('.message-wrapper').css({'min-height':'630px','max-height':'630px'});
          $('#text').css('margin-top','150px');
        }else{
          $('.message-wrapper').css({'min-height':'485px','max-height':'485px'});
          $('#text').css('margin-top','0px');
        }
      });

    }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/fonts/iconfont.css';

  .mycard {
    position: relative;
    width: 100%;
    height: 72px;
    background: url('../../../static/img/head_img.png') no-repeat;
    .user-name {
      position absolute;
      color #fff;
      top 30px;
    }
    .avatar {
      width: 48px;
      height: 48px;
      margin: 12px 12px 0 12px;
      border-radius: 50%;
    }

    .drop_down {
      width 108px;
      height 96px;
      background #fff;
      position absolute
      left 0
      top 50px
      z-index 1000
      box-shadow: 0px 2px 6px 0px rgba(102, 102, 102, 0.1);
      border-radius: 4px;

      ul {
        width 100%
        height 100%
        padding 5% 0
        box-sizing border-box

        .drop_down_li {
          cursor pointer
          width 100%
          height 50%
          color #333
          font-size 14px
          line-height 42px

          img {
            float left
            padding 10px 10px 0 10px
            vertical-align top
          }
        }
      }
    }
  }

  .header_inif {
    width 180px
    height 270px
    background #fff
    position absolute
    left 16px
    top 64px
    z-index 1000
    box-shadow: 0px 2px 6px 0px rgba(102, 102, 102, 0.1)
    border-radius: 4px
    overflow hidden

    .header_top {
      width 100%
      height 180px
    }

    .header_text {
      padding 10px
      box-sizing border-box

      h5 {
        color #333
        font-size 17px
      }
      p{
        color #999999
        font-size 12px
        margin-top 10px
      }
    }
  }

  footer {
    position: absolute;
    bottom: 24px;
    text-align: center;
    right: 0px;
  }

  .navbar {
    width: 100%;
    height: 60px;
    background: #fff;
    text-align: center

    a {
      width: 50%;
      display: block;
      float: left;
    }
  }

  .icon {
    display: inline-block;
    font-size: 26px;
    margin-top: 20px;
    padding: 0 16px;
    box-sizing: border-box;
    color: #ccc;
    opacity: 0.8;
    cursor: pointer;

    &.active {
      color: #337bfa;
    }

    &:hover {
      opacity: 1;
    }
  }

  .icon-msg, .icon-more {
    font-size: 22px;
  }

  .icon-msg {
    padding: 0 19px;
    border-right: 1px solid #ccc
  }

  .icon-more {
    color: #fff;
  }
  .icon-more :hover .drop_down{
    display block
  }

  .check-box {
    height 320px;
    overflow hidden;
    overflow-y auto;
  }
  .checkbox-item {
    .c-item {
      display inline-block;
      height 40px;
      line-height 40px;
      padding-left 50px;
      margin 15px 0;
    }
  }
</style>
